<template>
  <div class="table-page">
    <a-form label-align="right" layout="inline" auto-label-width :model="listParams" size="small" class="form my-10">
      <a-form-item field="eventKey" label="事件标识">
        <a-input v-model="listParams.eventKey" placeholder="输入事件标识检索" @press-enter="changeCurrent(1)"></a-input>
      </a-form-item>
      <a-form-item field="msgType" label="素材类型">
        <a-radio-group v-model="listParams.msgType">
          <a-radio value="">全部</a-radio>
          <a-radio value="text">文字</a-radio>
          <a-radio value="image">图片</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item hide-label>
        <a-space>
          <a-button type="primary" size="small" @click="changeCurrent(1)">
            <template #icon>
              <icon-search />
            </template>
            <template #default>查询</template>
          </a-button>
          <a-button size="small" @click="onResetSearch">
            <template #icon>
              <icon-sync />
            </template>
            <template #default>重置</template>
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <GiTable
      row-key="msgMaterialId"
      id="PushMaterials"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :row-selection="{ type: 'checkbox', showCheckedAll: true }"
      :pagination="pagination"
      @refresh="getTableData"
    >
      <template #custom-extra>
        <a-button type="primary" size="small" @click="onAddOrEdit(false)">
          <template #icon><icon-plus /></template>
          <span>新增</span>
        </a-button>
      </template>
      <template #content="{ record }">
        <span v-if="record.msgType == 'text'">{{ record.msgData }}</span>
        <ImgHoverPreview v-else :url="record.imageUrl" />
      </template>
      <template #action="{ record }">
        <a-popconfirm content="是否确认删除?" @ok="onDeleteItem(record.msgMaterialId)">
          <a-button type="text" size="small">
            <template #icon>
              <icon-delete />
            </template>
            删除
          </a-button>
        </a-popconfirm>
      </template>
    </GiTable>
    <Edit ref="EditRef" @getTableData="getTableData"></Edit>
  </div>
</template>

<script setup>
import { Message, Modal } from '@arco-design/web-vue'
import { usePagination } from '@/hooks'
import { wechatMsgSearch, wechatMsgDel } from '@/apis'
import Edit from './Edit.vue'

defineOptions({ name: 'PushMaterials' })

const columns = ref([
  {
    title: '素材类型',
    width: 120,
    render: (data) => {
      const text = data.record.msgType
      return text == 'text' ? '文字' : text == 'image' ? '图片' : '--'
    }
  },
  {
    title: '点击事件标识',
    width: 140,
    render: (data) => {
      const text = data.record.eventKey
      return text || '--'
    }
  },
  {
    title: '素材内容',
    width: 120,
    slotName: 'content'
  },
  {
    title: '操作',
    width: 100,
    align: 'center',
    fixed: 'right',
    slotName: 'action'
  }
])

const EditRef = ref()
const loading = ref(false)
const tableData = ref([])

const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: 15 })

const listParams = reactive({
  page: 1,
  size: 10,
  eventKey: undefined,
  msgType: undefined
})

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.size = pagination.pageSize
    const res = await wechatMsgSearch(listParams)
    tableData.value = res.data.data
    setTotal(res?.data?.total || 0)
  } finally {
    loading.value = false
  }
}
getTableData()

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

// 重置筛选查询
const onResetSearch = () => {
  listParams.eventKey = listParams.msgType = undefined
  changeCurrent(1)
}

// 添加/编辑
const onAddOrEdit = (item) => {
  EditRef.value?.addOrEdit(item)
}

// 删除单条数据
const onDeleteItem = async (msgMaterialId) => {
  Modal.warning({
    title: '警告',
    content: '是否确认删除',
    hideCancel: false,
    onBeforeOk: async () => {
      await wechatMsgDel({ msgMaterialId })
      Message.success('操作成功')
      getTableData()
      return true
    }
  })
}
</script>

<style lang="scss" scoped>
.textd90000 {
  color: #d90000;
}
.aggs {
  width: fit-content;
  height: 26px;
  background-color: rgb(var(--primary-1));
  box-shadow: rgb(var(--primary-1)) solid 1px;
  border-radius: 4px;
  border: 1px solid $color-theme;
}
.text808080 {
  color: #808080;
}
.text-size-13 {
  font-size: 13px;
}
.text2a82e4 {
  color: #2a82e4;
}
.text000000a6 {
  color: #000000a6;
}
</style>
